<template>
  <el-dialog
    class="large-pop"
    title="添加服务商"
    :append-to-body="true"
    :close-on-click-modal="false"
    :visible.sync="addVis"
    width="1200px"
    top="50px"
  >
    <el-form ref="addPartner" :model="form" :rules="rules" size="small" label-width="100px">
      <el-collapse v-model="activeNames">
        <el-collapse-item title="基本信息" name="1">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="服务商姓名:" prop="realName">
                <el-input
                  v-model.trim="form.realName"
                  maxlength="15"
                  placeholder="请输入姓名"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="手机号:" prop="phone">
                <el-input v-model.number="form.phone" placeholder="请输入手机号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="身份证号:" prop="identity">
                <el-input v-model.trim="form.identity" placeholder="请输入身份证号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签约状态:" prop="isVerify">
                <el-select v-model="form.isVerify" placeholder="签约状态" clearable>
                  <el-option
                    v-for="item in isVerifyStatus"
                    :key="item.key"
                    :label="item.display_name"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="签约时间:" prop="signTime">
                <el-date-picker
                  v-model="form.signTime"
                  type="datetime"
                  placeholder="选择签约时间"
                  style="width: 100%;"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否分润:" prop="isCommission">
                <el-select v-model="form.isCommission" placeholder="是否分润" clearable>
                  <el-option
                    v-for="item in commissionStatus"
                    :key="item.key"
                    :label="item.display_name"
                    :value="item.key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="归属区域:" prop="areaVal">
                <!-- @selectArea="getArea" -->
                <areaSelect ref="areaSelect" :status="2" @selectArea="getArea" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="推荐人:" prop="parentId">
                <el-select
                  v-model="form.parentId"
                  filterable
                  remote
                  :remote-method="remoteMethod"
                  :loading="parLoading"
                  placeholder="请输入推荐人姓名(可搜索)"
                  clearable
                >
                  <el-option
                    v-for="item in partnerOptions"
                    :key="item.id"
                    :label="item.realName"
                    :value="item.id"
                  >
                    <span style="float: left">{{ item.realName }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.phone }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="加盟信息" name="2">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="加盟费:" prop="participation">
                <el-input
                  v-model ="form.participation"
                  placeholder="请输入加盟费金额"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
        <el-collapse-item title="银行卡信息" name="3">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="账户名:" prop="cardUser">
                <el-input v-model.trim="form.cardUser" placeholder="请输入账户名" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="账户身份证:" prop="cardIdno">
                <el-input v-model.trim="form.cardIdno" placeholder="请输入持卡人身份证" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行名称:" prop="bankId">
                <el-select
                  v-model="form.bankname"
                  @change="getBankVal"
                  filterable
                  placeholder="请选择银行名称(可搜索)"
                  clearable
                >
                  <el-option
                    v-for="item in banknameOptions"
                    :key="item.id"
                    :label="item.bankName"
                    :value="item.id+' '+item.bankName"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行卡号:" prop="bankcard">
                <el-input v-model.number="form.bankcard" placeholder="请输入银行卡号" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预留手机号:" prop="cardPhone">
                <el-input v-model.number="form.cardPhone" placeholder="请输入银行卡预留手机号码" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="开户支行:" prop="branchname">
                <el-input v-model.trim="form.branchname" placeholder="请输入开户支行名称" clearable />
              </el-form-item>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancleAdd">取 消</el-button>
      <el-button :loading="loadingBtn" type="primary" @click="handleOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import areaSelect from '@/components/AreaSelect/index'
import { banks } from '@/api/common'
import { isvalidPhone, isMoney } from '@/utils/validate'
import { partnersAll, addPartners } from '@/api/partner'
export default {
  components: { areaSelect },
  data() {
    const validPhone = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入手机号码'))
      } else if (!isvalidPhone(value)) {
        callback(new Error('请输入正确的11位手机号码'))
      } else {
        callback()
      }
    }

    const validMoney = (rule, value, callback) => {
      if (!value) {
        callback(new Error('请输入加盟费'))
      } else if (!isMoney(value)) {
        callback(new Error('请输入正确的金额'))
      } else {
        callback()
      }
    }
    return {
      addVis: false,
      loadingBtn: false,
      activeNames: ['1', '2', '3'],
      isVerifyStatus: [
        { key: 1, display_name: '已签约' },
        { key: 0, display_name: '未签约' }
      ],
      commissionStatus: [
        { key: 1, display_name: '开启' },
        { key: 0, display_name: '关闭' }
      ],
      banknameOptions: [],
      partnerOptions: [],
      partnerList: [],
      parLoading: false,
      form: {
        areaVal: [],
        realName: '',
        phone: '',
        identity: '',
        signAt: '',
        signTime: '',
        isCommission: '',
        isVerify: '',
        participation: '',
        cityId: '',
        districtId: '',
        provinceId: '',
        cardUser: '',
        cardIdno: '',
        bankname: '',
        bankId: '',
        bankcard: '',
        cardPhone: '',
        branchname: '',
        parentId: ''
      },
      rules: {
        areaVal: [
          { required: true, message: '请选择所属区域', trigger: 'change' }
        ],
        realName: [
          { required: true, message: '请输入服务商姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, validator: validMoney, trigger: 'blur' },
          { type: 'number', message: '手机号必须为数字值' }
        ],
        identity: [{ required: true, message: '请输入身份证号码', trigger: 'blur' }],
        signTime: [
          { required: true, message: '请选择签约时间', trigger: 'change' }
        ],
        isCommission: [
          { required: true, message: '请选择分润状态', trigger: 'change' }
        ],
        isVerify: [
          { required: true, message: '请选择签约状态', trigger: 'change' }
        ],
        participation: [
          { required: true, validator: validMoney, trigger: 'blur' }
        ],
        cardUser: [
          { required: true, message: '请输入持卡人姓名', trigger: 'blur' }
        ],
        cardIdno: [{ required: true, message: '请输入持卡人身份证号码', trigger: 'blur' }],
        bankId: [
          {
            required: true,
            message: '请选择银行名称',
            trigger: 'change'
          }
        ],
        bankcard: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' },
          { type: 'number', message: '银行卡号必须为数字值' }
        ],
        cardPhone: [
          { required: true, validator: validPhone, trigger: 'blur' },
          { type: 'number', message: '手机号必须为数字值' }
        ],
        branchname: [
          { required: true, message: '请输入开户支行名称', trigger: 'blur' }
        ],
        parentId: [
          { required: true, message: '请选择推荐人', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    this.getAllbanks()
    this.getAllPartners()
  },
  methods: {
    // 获取所有银卡名称
    getAllbanks() {
      banks().then(res => {
        this.banknameOptions = res
      })
    },
    // 获取所有推荐人信息
    getAllPartners() {
      partnersAll().then(res => {
        // console.log(res)
        this.partnerList = res
      })
    },
    // 获取省市区id
    getArea({ provinceId, cityId, districtId, areaVal }) {
      this.form.areaVal = areaVal
      this.form.provinceId = provinceId
      this.form.cityId = cityId
      this.form.districtId = districtId
    },
    // 远程搜索推荐人
    remoteMethod(query) {
      if (query !== '') {
        this.parLoading = true
        setTimeout(() => {
          this.parLoading = false
          this.partnerOptions = this.partnerList.filter(item => {
            return item.realName.indexOf(query) > -1
          })
        }, 200)
      } else {
        this.partnerOptions = []
      }
    },
    // 获取银行名称和id
    getBankVal(val) {
      this.form.bankId = val.split(' ')[0]
      this.form.bankname = val.split(' ')[1]
    },
    // 点击确认添加
    handleOk() {
      console.log(this.form)
      this.form.signAt = new Date(this.form.signTime).getTime() / 1000
      this.$refs['addPartner'].validate(valid => {
        if (valid) {
          this.loadingBtn = true
          this.doAdd()
        } else {
          return false
        }
      })
    },
    // 点击取消按钮
    cancleAdd() {
      this.addVis = false
      this.form = {}
      this.$refs.areaSelect.clearArea()
    },
    // 添加服务商的接口
    doAdd() {
      addPartners(this.form)
        .then(res => {
          console.log(res)
          this.loadingBtn = false
          this.addVis = false
          this.$message({
            message: '添加成功',
            type: 'success'
          })
          this.$parent.init()
        })
        .catch(err => {
          this.loadingBtn = false
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select {
  width: 100%;
}
</style>
